<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫彩小球案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: black;
        }

        div {
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>

<body id="body">
    <script>
        var body = document.getElementById('body')
        function xcxq(x, y) {
            this.color = color[parseInt(Math.random() * color.length)];
            this.x = x;
            this.y = y;
            do {
                this.dx = parseInt(Math.random() * 20 - 10);
                this.dy = parseInt(Math.random() * 20 - 10);
            } while (this.dx == 0 && this.dy == 0)
            this.r = 20;
            this.op = 1;
            this.init();
          
            ball.push(this);

        }
        var color = ['red', 'green', 'blue', 'yellow', 'gold', 'skyblue'];
        xcxq.prototype.init = function () {
            this.dom = document.createElement('div');
            this.dom.style.width = this.r * 2 + 'px';
            this.dom.style.height = this.r * 2 + 'px';
            this.dom.style.backgroundColor = this.color;
            this.dom.style.left = this.x - this.r + 'px'
            this.dom.style.top = this.y - this.r + 'px'
            this.dom.style.opacity = this.op;
            body.appendChild(this.dom);
        }
        var ball = [];
        setInterval(function () {
            for (var i = 0; i < ball.length; i++) {
                ball[i].gu();
            }
        }, 20);
        xcxq.prototype.gu = function () {
            this.x += this.dx;
            this.y += this.dy;
            this.r += 0.2;
            this.op -= 0.01;
            this.dom.style.left = this.x - this.r + 'px';
            this.dom.style.top = this.y - this.r + 'px';
            this.dom.style.width = this.r * 2 + 'px';
            this.dom.style.height = this.r * 2 + 'px';
            this.dom.style.opacity = this.op;
            if(this.op<0){
                for(var j=0;j<ball.length;j++){
                    if(ball[j]==this){
                        ball.splice(j,1)
                    }
                 }
                document.body.removeChild(this.dom);
            }
        }
        document.onmousemove = function (e) {
            this.x = e.clientX;
            this.y = e.clientY;
            new xcxq(this.x, this.y);
        }
        document.onclick=function(){
            window.location='帅气的潘.html';
        }


    </script>
</body>

</html>